<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scroll"
      :refresher-enabled="true"
    >
      <template #top>
        <u-navbar
          back-text=""
          :is-back="false"
          title="草稿箱"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> </view>
            </view>
            <view v-if="dataList.length">
              <view class="flex col-span-1 justify-end" @click="manage" v-if="!show">
                <view class="text-[.875rem] text-[#5C6068]"> 管理 </view>
              </view>
              <view class="flex col-span-1 justify-end" @click="complete" v-if="show">
                <view class="text-[.875rem] text-[#00A9AB] font-bold"> 完成 </view>
              </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="p-4">
        <view class="grid grid-cols-2 gap-3">
          <view
            v-for="(i, k) in dataList"
            class="overflow-hidden relative rounded-lg"
            :key="k"
            @click="!show && edit(i)"
          >
            <template v-if="show">
              <view
                v-if="i.checked"
                @click.stop="selected(k)"
                class="absolute top-2 right-2 size-5 bg-[#00A9AB] rounded-full flex items-center justify-center border border-[#00A9AB] z-50"
              >
                <u-icon name="checkmark" color="#FFFFFF" class="mt-[.1875rem]" size="23"></u-icon>
              </view>
              <view
                v-else
                class="size-5 absolute top-2 right-2 bg-[#FFFFFF] rounded-full border z-50"
                @click.stop="selected(k)"
              ></view>
            </template>

            <view class="aspect-[1/1] overflow-hidden relative" v-if="i.thumb">
              <image :src="vk.myfn.handleImageUrl(i.thumb)" mode="aspectFill" class="!size-full" />
              <image
                src="/static/dddr85.png"
                class="h-[1rem] absolute left-1 top-1"
                v-if="i.basan_type == 1"
                mode="heightFix"
              />
              <image
                src="/static/dddr83.png"
                class="h-[1rem] absolute left-1 top-1"
                v-if="i.basan_type == 2"
                mode="heightFix"
              />
            </view>
            <view class="aspect-[1/1] bg-[#DDDFE4] flex items-center justify-center" v-else>
              <image src="/static/dddr4.png" class="size-12" mode="aspectFill" />
            </view>
            <view class="flex flex-col p-2 bg-white">
              <view class="text-[.875rem] text-[#161A24] font-bold line-clamp-1">{{ i.name || '钓点名称' }}</view>
              <view class="text-[.75rem] text-[#8E9299]">{{ vk.myfn.formatDateTime(i.create_time) }}</view>
            </view>
          </view>
        </view>
      </view>
      <template #bottom>
        <view class="pb-env">
          <view class="px-4 py-3" v-if="show">
            <view class="flex gap-2 justify-between">
              <view class="flex items-center">
                <u-checkbox-group active-color="#FF2948">
                  <u-checkbox v-model="checked" shape="circle" @change="checkAll">全选 </u-checkbox>
                </u-checkbox-group>
              </view>
              <view
                :class="checkedCount ? 'bg-[#FF2948]' : 'bg-[#FFD4D5]'"
                class="h-[2.75rem] w-3/4 rounded-full flex items-center justify-center btn gap-1"
                @click="deleteDraft"
              >
                <text class="text-[1rem] text-[#fff]">删除</text>
                <text class="text-[1rem] text-[#fff]" v-if="checkedCount">({{ checkedCount }})</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </yy-paging>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        show: false, // 是否显示管理按钮
        checked: false // 是否选中
      }
    },
    watch: {
      dataList: {
        handler(newVal) {
          console.log('newVal==> ', newVal.length)
          // 检查是否所有项目都被选中
          const allChecked = newVal.every(item => item.checked)
          allChecked ? (this.checked = true) : (this.checked = false)
        },
        deep: true
      }
    },
    onShow() {
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 0)
    },

    computed: {
      // 计算选中的草稿数量
      checkedCount() {
        return this.dataList.filter(item => item.checked).length
      }
    },

    methods: {
      async alertConfirm() {
        let obj = {
          id: this.dataList
            .filter(item => item.checked)
            .map(item => item.id)
            .join(',')
        }
        let res = await api.deleteDraft(obj)
        if (!res.code) return vk.toast(res.mes, 'none')
        vk.toast(res.msg, 500, e => {
          this.checked = false
          this.$refs.paging.reload()
        })
      },
      edit(i) {
        let that = this
        const { basan_type, id } = i
        const path = basan_type === 1 ? 'release' : 'lure'
        vk.navigateTo({
          url: `/pages/index/${path}?id=${id}&draft=true`
        })
      },
      selected(index) {
        this.dataList[index].checked = !this.dataList[index].checked
      },
      checkAll(e) {
        const checkedValue = e.value
        this.dataList.forEach(item => (item.checked = checkedValue))
      },
      deleteDraft() {
        if (!this.checkedCount) {
          return vk.toast('请选择要删除的草稿', 'none')
        }
        this.$refs.alert.config({
          show: true,
          title: '删除提示',
          describe: '是否确认删除所选草稿？删除后将无法恢复',
          cancel: '取消',
          cancelColor: '#000',
          confirm: '确认删除',
          confirmColor: '#FF2948',
          eventType: 'deleteDraft'
        })
      },

      complete() {
        this.show = false
      },
      manage() {
        this.show = true
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let obj = { page, limit }
        let res = await api.getDraftList(obj)
        const dataWithChecked = res.data.map(item => ({
          ...item,
          checked: false
        }))
        console.log('dataWithChecked==> ', dataWithChecked)
        this.$refs.paging.complete(dataWithChecked)
        !dataWithChecked.length && (this.show = false)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
